
<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>

      <el-form-item label="性别" prop="userSex">
        <el-radio-group v-model="ruleForm.userSex">
        <el-radio :value="1">男</el-radio>
        <el-radio :value="0">女</el-radio>
      </el-radio-group>
      </el-form-item>

      <el-form-item label="所属部门">
      <el-select v-model="ruleForm.depenmentId" placeholder="请选择部门">
        <el-option label="IT信息部" :value="1" />
        <el-option label="人力资源部" :value="2" />
        <el-option label="财务部" :value="3" />
        <el-option label="销售部" :value="4" />
        <el-option label="行政部" :value="5" />
      </el-select>
    </el-form-item>

      <el-form-item label="所在地址">
        <div id="app">
    <el-cascader
      size="large"
      :options="optios"
     v-model="province"
      @change="handleChange">
    </el-cascader>
  </div>
      </el-form-item>

      <el-form-item label="详细地址" prop="address">
        <el-input v-model="ruleForm.address" type="textarea" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          新增
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  
  import { regionData } from 'element-china-area-data'
  
  import { reactive, ref,onMounted} from 'vue'
  import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
  import axios from 'axios'
import {useCounterStore} from '@/stores/counter'
import {useRoute,useRouter} from 'vue-router'
const optios =regionData;
const province=ref([]);
const  handleChange=(valwescv:any)=>{
  province.value=valwescv;
  ruleForm.provinceId=valwescv[0];
  ruleForm.cityId=valwescv[1];
  ruleForm.countyId=valwescv[2];

    console.log(optios)
}
  
let router =useRouter();

  interface RuleForm {
    userName: string
    pwd:string,
    userSex: number
    provinceId: string
    cityId: string
    countyId: string
    address: string
    createPeople: string
    depenmentId:string
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    userName: '',
    pwd:'12345678',
    userSex: 0,
    depenmentId:'',
    provinceId:'',
    cityId: '',
    countyId: '',
    address: '',
    createPeople: '',

  })

  let Store=useCounterStore();
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({
    userName: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    address: [
      { required: true, message: '详细地址不能为空', trigger: 'blur' },
    ],

  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        axios({
          url:'http://localhost:5272/api/User/Handle',
          method:'post',
          data:{
            userName:ruleForm.userName,
            pwd:ruleForm.pwd,
            userSex:ruleForm.userSex,
            provinceId:ruleForm.provinceId,
            cityId:ruleForm.cityId,
            countyId:ruleForm.countyId,
            address:ruleForm.address,
            createPeople:Store.CurrLoginUser.UserName,
            depenmentId:ruleForm.depenmentId
          }
        })
        .then(res=>{
          console.log(ruleForm)
          if(res.data.code==101){
            console.log(Store.CurrLoginUser)
              ElMessage.success("新增成功");
              router.push("/ShowUser")
          }
          else{
            ElMessage.error(res.data.message)
          }
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))




//   onMounted(()=>{
//     Getprovince();
   
//   })
// let province=ref([]);
// let city=ref([]);
// let county=ref([]);

// const Getprovince=()=>{
//   axios({
//     url:'http://localhost:5174/api/Users/QueryProvnice',
//     method:'get',
//   })
//   .then(res=>{
//     if(res.data.code==101){
//       province.value=res.data.data;
//     }
//   })
// }


// const GetCity=()=>{
//   axios({
//     url:'http://localhost:5174/api/Users/QueryCity',
//     method:'get',
//     params:{
//       ProvinceId:ruleForm.provinceId
//     }
    
//   })
//   .then(res=>{
    
//     if(res.data.code==101){
//       city.value=res.data.data;
//     }
//   })
// }


// const GetCounty=()=>{
//   axios({
//     url:'http://localhost:5174/api/Users/QueryCounty',
//     method:'get',
//     params:{
//       CityId:ruleForm.cityId
//     }
//   })
//   .then(res=>{
   
//     if(res.data.code==101){
//       county.value=res.data.data;
//     }
//   })
// }

   

 

  </script>

  